<template>
	<view>
		<!-- <view class="tabr">
			<view :class="{on:typeClass=='luck'}"  @tap="switchType('luck')">普通红包</view>
			<view :class="{on:typeClass=='normal'}" @tap="switchType('normal')">游戏红包</view>
			<view class="border" :class="typeClass"></view>
		</view> -->
		<view class="content" :class="typeClass">
			<view class="luck">
<!-- 				<view class="row">
					<view class="term">
						红包个数
					</view>
					<view class="input">
						<view class="input">
							<input type="number" v-model="num" placeholder="输入红包个数" /> 个
						</view>
					</view>
				</view> -->
				<view class="row">
					<view class="term">
						转账金额
					</view>
					<view class="input">
						<input type="number" v-model="luckMoney" placeholder="输入金额" /> 元
					</view>
				</view>
				<view class="tis">
					零钱余额为:{{money}}
				</view>
				<!-- <view class="blessing">
					<input type="text" maxlength="12" placeholder="恭喜发财" v-model="blessing"  />
				</view> -->
				<view class="hand"  @tap="toOpen('one','one','two')">
					转账
				</view>
				<safeKey :show="safe_key" :have_pawd="have_pawd" @hide="safe_key=false;" @change="xz_pwad"></safeKey>
				<jpPwd ref="jpPwds" @completed="completed" @inputPwd="inputPwd" @forget="forget" :payType="pwd.payType" :keyType="pwd.keyType"
				 :pawType="pwd.pawType" :tite="pwd.tite" :cancelType="pwd.cancelType" :keep="pwd.keep" :msg="pwd.msg" :places="pwd.places"></jpPwd>
			</view>
			<view class="normal">
				<view class="row">
					<view class="term">
						红包个数
					</view>
					<view class="input">
						<input type="number" v-model="number" placeholder="输入红包个数" /> 个
					</view>
				</view>
				<view class="row">
					<view class="term">
						单个金额
					</view>
					<view class="input">
						<input type="number" v-model="money" placeholder="输入金额" /> 元
					</view>
				</view>
				<view class="tis">
					小伙伴领取的金额相同
				</view>
				<view class="blessing">
					<input type="text" maxlength="12" placeholder="恭喜发财" v-model="blessing"  />
				</view>
				<view class="hand" @tap="hand('normal')">
					转账
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let WebIM = require("../../utils/WebIM")["default"];
	let msgType = require("../../comps/chat/msgtype");
	let disp = require("../../utils/broadcast");
	let msgStorage = require("../../comps/chat/msgstorage");
	import jpPwd from '@/components/jp-pwd/jp-pwd.vue';
	import safeKey from "@/components/jiangbei-safekey/jiangbei-safekey.vue" 
	export default {
		components: {
			jpPwd,
			safeKey
		},
		data() {
			return {
				safe_key:false,
				have_pawd:'',
				num:'请选择红包个数',
				min:'',
				max:'',
				qunstauts:'',
				typeClass:'luck',//normal
				number:'',
				money:'',
				luckMoney:'',
				blessing:'零钱转账',
				baostatus:'',
				pwd: {
					payType: 'one', //支付样式  one two
					keyType: 'one', //键盘样式  one two
					pawType: 'one', //输入框样式  one two
					tite: '请输入支付密码', //标题
					contents: '确认收货后，就不能退换退款', //提示
					cancelType: false, //是否输入完密码后消失
					keep: false, //点击遮挡是否关闭
					msg: '', // 密码错误提示语
					places: 6
				},
				qid:'',
				personnum:'',//当前人数
				totalfen:'',//总分
				baonum:[],//可发包数
				gamestatus:'',
				money:''
			};
		},
		onLoad(option) {
			this.chatType = option.chatType
			this.myName = option.myname
			this.groupId = option.groupId
			this.your = option.your
			this.getPerson();
			this.lookfen();//查看剩余积分
			this.showbao();//可发送的包数
			this.getGinfo();//获取群规则
			this.baostatus = uni.getStorageSync('qunstauts')
			this.playgame();
			let token = uni.getStorageSync("token")
			uni.request({
				url: this.G_base + '/api/user/balance',
				method: "GET",
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					'Authori-zation': 'Bearer ' + token
				},
				success: (res) => {
					this.money =res.data.data.now_money
				},
				fail: (err) => {
					console.log(err)
				}
			});
		},
		methods:{
			xz_pwad(e) { console.log(e.number)
			let mima =e.number[0]+""+e.number[1]+""+e.number[2]+""+e.number[3]+""+e.number[4]+""+e.number[5]
			console.log(mima)
			this.completed(mima)
			 console.log("mima")},
			//获取开局信息
			playgame(){
				let token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/lz/isqinfo',
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					data: {
						id: this.qid,
					},
					success: (res) => {
						console.log("开局信息",res)
						this.gamestatus =res.data.data.kj_status
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			//获取群规则信息
			getGinfo(){
				let token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/lz/qgzinfo',
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					data: {
						qid: this.groupId,
					},
					success: (res) => {
						this.qunstauts = res.data.data[0].status
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			pickerChange(e) {
				let token = uni.getStorageSync("token")
				console.log(this.baonum[e.detail.value].status)
				this.num = this.baonum[e.detail.value].num
				this.min = this.baonum[e.detail.value].min
				this.max = this.baonum[e.detail.value].max
				this.baostatus = this.baonum[e.detail.value].status
				uni.setStorageSync('num', this.baonum[e.detail.value].num)
				uni.setStorageSync('xuanze', this.baonum[e.detail.value].sum)
				uni.setStorageSync('qunstauts', this.baonum[e.detail.value].status)
				// uni.request({
				// 	url: this.G_base + '/api/lz/hbdlp',
				// 	method: "POST",
				// 	header: {
				// 		'content-type': 'application/x-www-form-urlencoded',
				// 		'Authori-zation': 'Bearer ' + token
				// 	},
				// 	data: {
				// 		id: this.groupId,
				// 		num: this.num
				// 	},
				// 	success: (res) => {
				// 		console.log(res);
				// 		this.qunstauts = res.data.data.status
				// 		console.log("判断包数的限制")
				// 		// that.myqid =res.data.data.id
				// 	},
				// 	fail: (err) => {
				// 		console.log(err)
				// 	}
				// });
			},
			showbao(){
				let token = uni.getStorageSync('token')
				uni.request({
					url: this.G_base + '/api/lz/jfbxz',
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					data: {
						qid: this.groupId
					},
					success: (res) => {
						this.baonum = res.data.data;
					},
					fail: (err) => {
					}
				});
			},
			lookfen(){
				let token = uni.getStorageSync('token')
				uni.request({
					url: this.G_base + '/api/lz/quserfOne',
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					data: {
						account: this.myName,
						id:this.qid
					},
					success: (res) => {
						this.totalfen = res.data.data.integral
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			getPerson(){
				let token = uni.getStorageSync('token')
				uni.request({
					url: this.G_base + '/api/lz/qyinfo',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					data: {
						id: this.qid,
					},
					success: res => {
						this.personnum = res.data.data.count
					}
				})
			},
			inputPwd(e) {
				this.pwd.msg = ''
			},
			//本地发送红包
				upclick(hb_msg){
						let me = this;
						// String.prototype.trim = function() {
						// 	return me.replace(/(^\s*)|(\s*$)/g, "");
						// };
						if (!me.luckMoney.trim()) {
							return;
						}
						let id = WebIM.conn.getUniqueId();
						let msg = new WebIM.message(msgType.TEXT, id);
						msg.set({
							msg: '余额红包',
							from: me.myName,
							to: me.your,
							ext: {
								money: me.luckMoney,
								beizhu:me.blessing,
								hb_id:hb_msg,
								type:3
							},
							roomType: false,
							chatType: me.chatType,
							success(id, serverMsgId) {
								console.log("成功了");
								uni.showToast({
									title:"转账成功",
									icon:'none'
								})
								// 关闭表情弹窗
								me.$parent.cancelEmoji()
								disp.fire("em.chat.sendSuccess", id, me.userMessage);
								
							},
							fail(id, serverMsgId) {
								console.log(msg)
								console.log("失败了");
							},
						});
						if (this.chatType == msgType.chatType.CHAT_ROOM) {
							msg.setGroup("groupchat");
						}
						try {
							WebIM.conn.send(msg.body);
							let obj = {
								msg: msg,
								type: msgType.TEXT,
							};
							this.saveSendMsg(obj);
						} catch (error) {
							console.log("error", error);
						}
						this.userMessage = "";
						this.inputMessage = "";
						uni.hideKeyboard();
				},
				isGroupChat() {
					return this.chatType == msgType.chatType.CHAT_ROOM;
				},
				
				getSendToParam() {
					return this.isGroupChat() ? this.groupId : this.your;
				},
				saveSendMsg(evt) {
					msgStorage.saveMsg(evt.msg, evt.type);
				},
			forget() {
						uni.navigateTo({
							url: '/pages/xiugaimima/zhifumima'
						})
					},
			toOpen(payType, keyType, pawType) {
				var that = this
				let token = uni.getStorageSync("token")
				console.log(that.luckMoney)
				if (that.luckMoney == '') {
					uni.showToast({
						title: '请输入金额',
						icon: 'none'
					})
					
				}else{
						this.pwd.payType = payType
						this.pwd.keyType = keyType
						this.pwd.pawType = pawType
						this.pwd.places = 6
						// this.$refs.jpPwds.toOpen()
						// this.hidd = false
						this.safe_key=true;
					}
			},
			//发送红包
			completed(e) {
				let that = this
				let token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/lz/zfpas',
					data: {
						pas: e
					},
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					success: (res) => {
						console.log(res)
						if (res.data.status == 200) {

								uni.request({
									url: this.G_base + '/api/lz/dhzadd',
									data: {
										f_name:this.myName,
										money:this.luckMoney,
										s_name:this.your,
										title:this.blessing,
										status:2
									},
									method: "POST",
									header: {
										'content-type': 'application/x-www-form-urlencoded',
										'Authori-zation': 'Bearer ' + token
									},
									success: (res) => {
										if (res.data.status == 200) {
											uni.navigateBack({
												
											})
											that.upclick(res.data.data.hbid);
											console.log("执行发送红包的发放")
										} else {
											uni.showToast({
												title:res.data.msg,
												icon:"none"
											})
										}
									},
									fail: (err) => {
										console.log(err)
											
									}
								});
						} else {
							uni.showToast({
								title:"支付密码错误",
								icon:'none'
							})
							that.pwd.msg = '密码错误'
							that.$refs.jpPwds.backs()
						}
					},
					fail: (err) => {
						console.log(err)
						
					}
				});
			},
			switchType(type){
				this.typeClass = type;
			},
			hand(type){
				let redEnvelopeData = {
					type:type,
					number:this.number,
					blessing:this.blessing,
					money:this.money
				}
				if(type = 'luck'){
					redEnvelopeData.money = this.luckMoney;
				}
				//判断数据有效性
				if((!redEnvelopeData.money)||redEnvelopeData.money<=0)
				{
					return uni.showToast({title:"金额不能为空",icon:'none'});
				}
				if(redEnvelopeData.number!=Math.abs(parseInt(redEnvelopeData.number))){
					return uni.showToast({title:"数量填写大于0的整数",icon:'none'});
				}
				redEnvelopeData.blessing = redEnvelopeData.blessing||'恭喜发财';//没填写则默认恭喜发财
				//此处实际应用时应该post到服务器，然后服务器广播长连接
				//模板借由本地缓存实现效果，实际应用中请不要使用此方法。 
				uni.showLoading({title:'提交中'});
				setTimeout(()=>{
					uni.setStorage({
						key: 'redEnvelopeData',
						data: redEnvelopeData,
						success: function () {
							uni.hideLoading();
							uni.navigateBack();
						}
					});
				},300)
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f3f3f3;
	}
	view{
		display: flex;
		flex-wrap: wrap;
	}
	.tabr{
		width: 94%;
		height: 105upx;
		padding: 0 3%;
		border-bottom: solid 1upx #dedede;
		view{
			width: 50%;
			height: 100upx;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			color: #999;
		}
		.on{
			color: #cf3c35;
		}
		.border{
			height: 4upx;
			background-color: #cf3c35;
			transition: all .3s ease-out;
			&.normal{
				transform: translate3d(100%,0,0);
			}
		}
		
	}
	.content{
		width: 100%;
		// height: 80vh;
		overflow: hidden;
		&.normal{
			.luck{
				transform: translate3d(-100%,0,0);
			}
			.normal{
				transform: translate3d(0,-100%,0);
			}
		}
		.luck,.normal{
			
			transition: all .3s ease-out;
		}
		.luck{
			
		}
		.normal{
			transform: translate3d(100%,-100%,0);
		}
		.row,.tis,.blessing,.hand{
			width: 94%;
		}
		.row,.tis,.blessing{
			border-bottom: #dedede solid 1upx;
		}
		.row,.blessing{
			padding: 0 3%;
			background-color: #fff;
		}
		.row,.blessing,.hand{
			height: 100upx;
			align-items: center;
		}
		.row{
			justify-content: space-between;
			flex-wrap: nowrap;
			.term,.input{
				width: 50%;
			}
			.input{
				flex-shrink: 0;
				flex-wrap: nowrap;
				justify-content: flex-end;
				align-items: center;
				input{
					height: 50upx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					text-align: right;
					margin-right: 20upx;
					font-size: 30upx;
				}
			}
		}
		.tis{
			height: 60upx;
			padding: 20upx 3%;
			font-size: 30upx;
			color: #999;
		}
		.blessing{
			input{
				width: 100%;
				height: 50upx;
				font-size: 32upx;
			}
		}	
		.hand{
			margin: 30upx 3%;
			background-color: #cf3c35;
			color: #fff;
			font-size: 34upx;
			justify-content: center;
			border-radius: 10upx;
			height: 90upx;
		}
	}
		
</style>
